import { BaseComponentProps, UmiComponentProps } from '@/common/type';
import { SearchCol, SearchRow } from '@/styled/form';
import { DatePicker, Form, Modal, Checkbox, Row, Col } from 'antd';
import React, { Component } from 'react';


const { RangePicker } = DatePicker;

interface P {
  list?: any,
  dispatch: Function,
  cond?: any,
  form?: any,
  visible?: boolean,
  handleOk?: Function,
  handleCancel?: Function,
  title?: string,
  data?: any,
}

type Props = P & UmiComponentProps & BaseComponentProps;

class ModalForm extends Component<Props, any> {


  componentDidMount() {

  }

  handleCancel = () => {
    this.props.handleCancel()
  }

  handleOk = () => {
    this.props.handleOk()
  }

  render() {
    const { form, visible, title } = this.props
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 },
      },
    };
    return (
      <Modal
        width="35%"
        title={title}
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        destroyOnClose
      >

        <Form>
          <SearchRow>
            <SearchCol span={24} key={0}>
              <Form.Item
                label="报警时间"
                {...formItemLayout}
              >
                {getFieldDecorator('createTime', {
                  rules: [{ required: true, message: '请选择时间' }],
                })(
                  <RangePicker
                    showTime={false}
                    format="YYYY-MM-DD"
                    placeholder={['开始日期', '结束日期']}
                  />
                )}
              </Form.Item>
            </SearchCol>
            <SearchCol span={24} key={1}>
              <Form.Item
                {...formItemLayout}
                label='处理情况'
              >

                {
                  getFieldDecorator('handles', {
                    rules: [{ required: true, message: '请选择处理情况' }],
                  })(
                    <Checkbox.Group style={{ width: '100%', marginTop: '8px' }}>
                      <Row>
                        <Col span={8}>
                          <Checkbox value={2}>已处理</Checkbox>
                        </Col>
                        <Col span={8}>
                          <Checkbox value={1}>待处理</Checkbox>
                        </Col>
                      </Row>
                    </Checkbox.Group>,
                  )
                }


              </Form.Item>
            </SearchCol>

          </SearchRow>
        </Form>

      </Modal>
    )
  }
}

const FormList = Form.create<any>()(ModalForm)
export default FormList
